<template>
	<view class="user-address-list">	
		<view @tap.stop="goDetail(index)" class="list-item flex-center pd-lg mb-md ml-md mr-md fill-base radius-16 rel"
			v-for="(item,index) in list.data" :key="index">
			<view class="flex-center flex-column">
				<view class="item-img rel">
					<image @tap.stop="toPreviewImage(index)" mode="aspectFill" lazy-load class="item-img radius"
						:src="item.cover">
					</image>
				</view>
				<view class="item-tag flex-center f-icontext c-base radius-20"
					:class="[{'can-service':item.text_type==1}]">
					{{item.text_type == 1 ?'可服务': '服务中'}}
				</view>
			</view>
			<view class="flex-1 ml-md max-510">
				<view class="flex-between">
					<view class="flex-y-center f-title c-title">
						<view class="text-bold max-200 ellipsis">{{item.title}}</view>
						<view @tap.stop="toPreviewImage(index, 1)" class="more-img flex-center ml-sm f-icontext"
							:style="{color:primaryColor,border:`1rpx solid ${primaryColor}`}">更多照片</view>
					</view>
				</view>
				<view class="flex-between mt-sm mb-md pb-md b-1px-b">
					<view class="flex-y-center f-icontext">
						<view class="flex-y-center"><i class="iconfont iconyduixingxingshixin icon-font-color"></i>
							<view class="star-text">{{item.star}}</view>
						</view>
						<view class="order-num">
							已服务 {{item.sale > 9999 ? '9999+' : item.sale}}单</view>
					</view>
					
					<view class="flex-between" style="width: 250rpx;">
						<view class="f-title c-title image-bg happy_bean" :style="{color: primaryColor}">豆</view>
						<view class="flex-center">
							<i class="iconfont iconjuli" :style="{color:primaryColor}"></i>
							<view class="f-desc c-title">53km{{}}</view>
						</view>
					</view>
				</view>
				<view class="flex-between">
					<view class="flex-y-center f-desc c-caption">
						<view @tap.stop="toShowPopup(index,'message')" class="flex-y-center"><i
								class="iconfont iconpinglun mr-sm"></i>{{14}} </view>
						<view @tap.stop="toCollect(index)" class="flex-y-center ml-md"><i class="iconfont mr-sm"
								:class="[{'iconshoucang1':!item.is_collect},{'iconshoucang2':item.is_collect}]"
								:style="{color:item.is_collect ? primaryColor :''}"></i>{{7}} </view>
						<view @tap.stop="goInfo(index)" class="flex-y-center ml-md">
							<i class="iconfont iconxiangqing mr-sm"></i>
							<view class="f-icontext">详情</view>
						</view>
						<view @tap.stop="goInfo(index)" class="flex-y-center ml-md">
							<view class="text-center" :style="{color: primaryColor}" >¥{{ item.price }}</view>
						</view>
					</view>
			
					<!-- <view @tap.stop="toShowPopup(index,'technician')" class="item-btn flex-center f-desc c-base"
						:style="{background: primaryColor}">立即预约
					</view> -->
				</view>
			</view>
		</view>

		<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading" v-if="loading">
		</load-more>
		<abnor :tip="[{ text: '你还没有添加项目哦~', color: 0 }]" v-if="!loading&&list.data.length<=0&&list.current_page==1">
		</abnor>

		<view class="space-max-footer"></view>

		<fix-bottom-button v-if="list.data.length < 3" @confirm="confirm"
			:text="[{text:'添加项目'+indextxt,type:'confirm'}]" bgColor="#fff"></fix-bottom-button>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				options: {},
				param: {
					p: 1,
				},
				list: {},
				loading: true,
				lockTap: false,
				indextxt:''
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			userInfo: state => state.user.userInfo,
		}),
		onLoad(options) {
			let {
				check = 0
			} = options
			this.options = options
			this.initIndex()
		},
		onUnload() {

		},
		onPullDownRefresh() {
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.list.current_page >= this.list.last_page || this.loading) return;
			this.param.p = this.param.p + 1;
			this.loading = true;
			this.getList();
		},
		methods: {
			async initIndex(refresh = false) {
				await this.getList()
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
			},
			initRefresh() {
				this.param.p = 1
				this.initIndex(true)
			},
			async getList() {
				let {
					list: oldList,
					param
				} = this
				let newList = await this.$api.mine.serviceList(param);

				if (this.param.p == 1) {
					this.list = newList
				} else {
					newList = oldList.concat(newList)
					this.list = newList
				}
				if(newList.total==0)
				{
					this.indextxt = 'A';
				}else if(newList.total==1)
				{
					this.indextxt = 'B';
				}else{
					this.indextxt = 'C';
				}
				this.loading = false
				this.$util.hideAll()
			},
			goDetail(index) {
				let {
					id
				} = this.list.data[index]
				let url = `/user/pages/shop/edit-service?id=${id}`
				this.$util.goUrl({
					url
				})
			},
			confirm() {
				let url = '/user/pages/shop/edit-service?goods'
				this.$util.goUrl({
					url
				})
			},
			toPreviewImage(index, key = 0) {
				let {
					cover,
					imgs
				} = this.list.data[index]
				let urls = [cover]
				if (key) {
					urls = imgs
				}
				this.$util.previewImage({
					current: urls,
					urls
				})
			},
		}
	}
</script>

<style lang="scss">
	.user-address-list {
		.address-icon {
			width: 64rpx;
			height: 64rpx;

			.iconfont {
				font-size: 38rpx;
			}
		}

		.address-info {
			max-width: 600rpx;
		}

		.username {
			font-size: 30rpx;
		}

		.oper-info {
			height: 80rpx;
		}
	}
	.list-item {
		.top-tag {
			width: 40rpx;
			height: 30rpx;
			color: #B75E1D;
			background: linear-gradient(90deg, #DFB885 0%, #FCE0AD 100%);
			border-radius: 8rpx 0 8rpx 0;
			top: 0;
			left: 0;
		}
	
		.item-img {
			width: 124rpx;
			height: 124rpx;
		}
	
		.image-bg {
			width: 55rpx;
			height: 55rpx;
			font-weight: 600;
			padding-top: 0rpx;
			text-align: center;
			background-position: center;
			background-size:cover;
			background-repeat: no-repeat;
			background-image: url("/static/common/avoid.png");
		}
	
		.top-img {
			width: 146rpx;
			height: 140rpx;
			top: -7rpx;
			left: -11rpx;
		}
	
		.hot-img {
			width: 75rpx;
			height: 51rpx;
			top: 77rpx;
			left: 25rpx;
		}
	
		.new-img {
			width: 38rpx;
			height: 52rpx;
			top: 83rpx;
			left: 78rpx;
		}
	
		.item-tag {
			width: 100rpx;
			height: 32rpx;
			color: #000;
			background: rgba(216, 216, 216, 0.3);
			margin-top: 19rpx;
			margin-bottom: 6rpx;
		}
	
		.item-tag.can-service {
			color: #EBDDB1;
			background: linear-gradient(270deg, #4C545A 0%, #282B34 100%);
		}
	
		.more-img {
			width: 104rpx;
			height: 33rpx;
			border-radius: 3px;
			transform: rotateZ(360deg);
		}
	
		.can-service-btn {
			width: 64rpx;
			height: 28rpx;
			margin-left: 8rpx;
	
			.bg {
				width: 64rpx;
				height: 28rpx;
				opacity: 0.1;
				border-radius: 3rpx;
				top: 0;
				left: 0;
				z-index: 1;
			}
	
			.text {
				width: 64rpx;
				height: 28rpx;
				top: 0;
				left: 0;
				z-index: 2
			}
		}
	
		.iconyduixingxingshixin {
			font-size: 28rpx;
			background-image: -webkit-linear-gradient(270deg, #FAD961 0%, #F76B1C 100%);
		}
	
		.star-text {
			color: #FF9519;
			margin-left: 6rpx;
		}
	
		.order-num {
			color: #4D4D4D;
			margin-left: 16rpx;
		}
	
		.item-btn {
			width: 130rpx;
			height: 52rpx;
			border-radius: 8rpx;
		}
	}
</style>
